const EngineCanvasId = "blackHoleCanvas";

class CanvasHolder {
  canvasId = "";

  canvas = null;

  hiddenContainer = document.createElement("div");

  constructor(canvasId = "canvas") {
    this.canvasId = canvasId;
  }

  create() {
    const newCanvas = document.createElement("canvas");
    newCanvas.id = this.canvasId;
    newCanvas.style.display = "none";
    newCanvas.style.width = "100%";
    newCanvas.style.height = "100%";
    newCanvas.setAttribute("tabindex", "1");
    newCanvas.oncontextmenu = (e) => {
      e.preventDefault();
    };

    this.canvas = newCanvas;
    return this.canvas;
  }

  set(v) {
    this.canvas = v;
  }

  get() {
    return this.canvas;
  }

  moveCanvasToBody() {
    if (this.canvas) {
      document.body.appendChild(this.canvas);
      this.canvas.style.display = "none";
    }
  }

  moveCanvasToTarget(target) {
    if (this.canvas) {
      target.appendChild(this.canvas);
      setTimeout((_) => {
        this.canvas.style.display = "block";
      }, 100);
      //camDir: (3) [0.196893003682951, 0.815880572586077, -0.5436653716922943]
      //camPos: (3) [-6.698884690180421, -27.758679962251335, 136.83311279287955]
      //camRotate: (4) [0.47432447195619576, -0.05642348320804835, -0.10377548246189491, 0.8723894400357837]
    }
    return;
  }

  hidden() {
    if (this.canvas) {
      this.canvas.style.display = "none";
    }
  }

  show() {
    if (this.canvas) {
      this.canvas.style.display = "block";
    }
  }
}
export const canvasHolder = new CanvasHolder(EngineCanvasId);
